<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    append-to-body
    :width="width + '%'"
     :top="top + 'vh'"
    :before-close="close"
    class="wp-panel"
  >
    <div class="wp-panel-header">
      <div>
        <div class="wp-panel-header__desc">销售合同</div>
        <div>{{ contractInfo.contractCode }}</div>
      </div>
      <div>
      <template v-if="sourceType=='default'">
        <template v-if="contractInfo.status ===0 || contractInfo.status ===2">
        <el-button @click.native="submitContract(contractInfo.contractCode)" type="success">提 交</el-button>
        <el-button @click.native="cancelContract(contractInfo.contractCode)" type="warning">取消合同</el-button>
        </template>
        <template v-else-if="contractInfo.status ===1">
          <el-button @click.native="passContract(contractInfo.contractCode)" type="success">通 过</el-button>
           <el-button @click.native="rejectContract(contractInfo.contractCode)" type="warning">驳 回</el-button>
        </template>
        <template v-else-if="contractInfo.status ===3">
           <el-button @click.native="rejectContract(contractInfo.contractCode,'撤回')" type="warning">撤 回</el-button>
        </template>
        <template v-else-if="contractInfo.status ===4">
           <el-button @click.native="cancelContract(contractInfo.contractCode,'取消合同')" type="warning">取消合同</el-button>
        </template>
        </template>
        <el-button @click.native="close" type="danger">关 闭</el-button>
      </div>
    </div>
    <el-descriptions class="header-descriptions-item" direction="vertical" :column="4">
      <el-descriptions-item label="客户名称">
        <el-link type="primary" @click="toCustomerDetail"> {{ contractInfo.customerName||'--' }} </el-link>
        </el-descriptions-item>
      <el-descriptions-item label="所属公司">{{ contractInfo.companyName||'--' }}</el-descriptions-item>
      <el-descriptions-item label="合同状态">{{ contractInfo.statusName||'--' }}</el-descriptions-item>
    </el-descriptions>
    <div class="wp-panel-footer">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane :key="k1" name="1">
          <span slot="label"><i class="el-icon-date"></i> 合同信息</span>
          <Base-info :param="contractInfo" :canModify="canModify" @editAfter="refreshList"/>
        </el-tab-pane>
        <el-tab-pane lazy :key="k2" name="2">
          <span slot="label"><i class="el-icon-date"></i> 合同文件</span>
            <Contract-file :param="contractInfo" :canModify="canModify" :canSign="canSign"/>
        </el-tab-pane>
        <!-- <el-tab-pane lazy :key="k3" name="3">
           <span slot="label"><i class="el-icon-date"></i> 附件</span>
            <Contract-attachment :param="contractInfo" :canModify="canModify"/>
        </el-tab-pane> -->
      </el-tabs>
    </div>
    <CDetailPanel sourceType="contract" :param="customerInfo"  :show.sync="customerDetail"/>
  </el-dialog>
</template>
<script>
import BaseInfo from './detail/BaseInfo'
import ContractFile from './detail/ContractFile'
import ContractAttachment from './detail/ContractAttachment'
import Mixins from './mixins'
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    },
    title: String,
    data: Object,
    sourceType: {type: String, default: 'default'},
    top: { type: Number, default: 2 },
    width: { type: Number, default: 80 }
  },
  components: {BaseInfo,
    ContractFile,
    ContractAttachment,
    CDetailPanel: () => import('@/views/crm/customer/components/DetailPanel') },
  mixins: [Mixins],
  watch: {
    show (nVal) {
      this.visible = nVal
    },
    data: {
      handler (nVal) {
        this.contractInfo = nVal
        this.canSign = nVal && nVal.status === 3 && this.sourceType === 'default'
        this.canModify = (nVal.status === 0 || nVal.status === 2) && this.sourceType === 'default'
      },
      deep: true,
      immediate: true
    }
  },
  data () {
    return {
      visible: this.show,
      activeEdit: false,
      contractInfo: {},
      customerDetail: false,
      customerInfo: {},
      canModify: false,
      activeName: '1',
      k1: 1,
      k2: 2,
      k3: 3
    }
  },
  methods: {
    handleTabClick (tab, event) {
      if (tab.name === '1') {
        this.k1 = Math.random()
      } else if (tab.name === '2') {
        this.k2 = Math.random()
      } else if (tab.name === '3') {
        this.k3 = Math.random()
      }
    },
    close () {
      this.$emit('update:show', false)
    },
    toCustomerDetail () {
      if (this.contractInfo.customerCode) {
        this.customerInfo = {customerCode: this.contractInfo.customerCode}
        this.customerDetail = true
      }
    },
    refreshList () {
      this.$parent.initPageList()
    },
    submitContract (contractCode) {
      this.$msgBox.confirm('确认提交合同', () => {
        this.requestOption('submitContract', {contractCode}, (res) => {
          this.close()
          this.refreshList()
        })
      })
    },
    cancelContract (contractCode, msg = '取消合同') {
      this.$prompt(`请输入${msg}原因`, msg, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: function (v) {
          if (!v || v === undefined || v === '') {
            return '不能为空'
          }
        }
      }).then(({ value }) => {
        this.requestOption('cancelContract', {contractCode, failureReason: value}, (res) => {
          this.close()
          this.refreshList()
        })
      }).catch(() => {
      })
    },
    passContract (contractCode) {
      this.$msgBox.confirm('确认合同通过', () => {
        this.requestOption('passContract', {contractCode}, (res) => {
          this.close()
          this.refreshList()
        })
      })
    },
    rejectContract (contractCode, msg = '驳回') {
      this.$msgBox.confirm(`确认${msg}合同`, () => {
        this.requestOption('rejectContract', {contractCode}, (res) => {
          this.close()
          this.refreshList()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
